import '@/pages/Drag/sub-components/propertyConfig/propertyConfig.less';

import {
  useState
} from 'react';

import {
  Select,Checkbox,Input,Button
} from 'antd';

import {
  AppstoreAddOutlined
} from '@ant-design/icons';

import {
  titleRender,
  fieldRender,checkRender,
  tipRender,
  fieldPermissionsRender,
} from '@/components/ComponentConfig/commonItem';

import { subFormCompSpanWidthRender }from './spanWidth';

import ValidationRule from '@/components/drag/ValidationRule'

type PropsType ={
  config:any,
  onChangeCallback:Function
}

function inputConfig(props:PropsType){
  const {config} = props;
  const {props:compProps} = config;
  
  const setProps = (key:any,val:any)=>{
    const data = {...config,props:{...config.props,[key]:val}}
    props.onChangeCallback(data);
  }

  function formatRender(key:string){

    const opts = [
      { label: '无', value: '' },
      { label: '手机号', value: 'phone'},
      { label: '电话号', value: 'mobeil' },
      { label: '身份证号', value: 'IDcard' },
      { label: '邮箱', value: 'email' }
    ]
    const onSelectChange = (val:string)=>{
      setProps(key,val);
    }
    return (
      <div className="item" key={key}>
        <h4 className="tit">格式：</h4>
        <Select 
          style={{width:'100%'}}
          value={compProps.format} 
          options={opts} 
          onChange={onSelectChange} 
        />
      </div>
    )
  }
  function isTextarea(key:string){

    return (
      <div className="item">
        <h4 className="tit">文本类型：</h4>
        <Checkbox 
          checked={compProps[key]}
          onChange={(e)=>{
            setProps(key,e.target.checked)
          }} 
        >
          多行文本
        </Checkbox>
      </div>
    )
  }
  function setDefaultValue(){
  
    const [showValid,setShowValid] = useState(false);
    const opts = [
      { label: '自定义', value: 'customize' },
      { label: '公式联动', value: 'formulaLinkage'}
    ]
  
    const onSelectChange = (val:string)=>{
      setProps('defaultValType',val);
    }
  
    return (
      <div className="item" >
         <h4 className="tit">默认值：</h4>
         <Select value={compProps.defaultValType} options={opts} onChange={onSelectChange} style={{width:'100%'}} />
         {compProps.defaultValType === 'customize' ? (
           <Input
            style={{marginTop:'10px'}}
            defaultValue={config.value}
            value={config.value}
            onChange={(e)=>{
              const data = {...config,value:e.target.value}
              props.onChangeCallback(data);
            }}
           />
         ):(
           <Button 
            style={{marginTop:'10px'}}
            onClick={()=>setShowValid(true)}
            >
              <AppstoreAddOutlined /> 公式联动
            </Button>
         )}
          {showValid && (
            <ValidationRule
              type="component"
              visible={showValid}
              handleClose={() => setShowValid(false)}
              field={config}
            />
          )}
          
      </div>
    )
  }
  
  
  return (
    <div>     
      { titleRender(config,props,'title')}
      { fieldRender(config,props,'field')}

      { isTextarea('textarea')}
      { tipRender(config,props,'tip')}
      {formatRender('format')}
      
      {/* { setDefaultValue()} */}
      { fieldPermissionsRender(config,props,'fieldPermissions')}
      { checkRender(config,props,'check')}
      { subFormCompSpanWidthRender(config,props) }
    </div>
  )
}
export default inputConfig